<template>
  <div></div>
</template>

<script setup>
import { ref, inject, getCurrentInstance, nextTick, onMounted } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";
import tool from "@/utils/tool";

const props = defineProps({
  node: Object,
  inputParam: Object
});

const initializing = ref(true);
const currNode = ref(props.node);
const currValue = ref({});
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);
const queryInfo = ref({
  pageNumber: 1,
  pageSize: 1
});

const loadValue = tool.debounce(async() => {
  initializing.value = true;
  const dataList = (await visual.loadData(
    currNode.value.compData,
    eventHandler,
    getData(),
    currNode.value)).data || [];
  currValue.value = dataList.length > 0 && dataList[0] || {};
  await eventHandler.trigger('数据加载事件', currValue.value);
  await nextTick(() => initializing.value = false);
});

const getData = () => {
  return {
    ...queryInfo.value,
    inputParam: currNode.value.inputParam || {}
  };
};

const changeStyle = () => {};

const refresh = () => {
  loadValue();
};

onMounted(async() => {
  loadValue();
  await eventHandler.trigger('初始化事件');
});

defineExpose({ getData, changeStyle, refresh });
</script>